<template>
	<view :class="[primarySize()]">
		<view class="page-foot bg-white">
			<view class="ptb10 plr30 flex-box" v-if="model.id">
				<view class="del"   @click="bindDelModule()">删除</view>
				<view class="btn1 ml30 mini" @click="bindSubmit()">提交</view>
			</view>
			<view class="ptb10 plr30" v-else>
				<view class="btn1" @click="bindSubmit()">提交</view>
			</view>
		</view>
		<view class="container">
			<view class="ptb20 plr30">
				<view class="box1">
					<view class="flex-box item" style="border-top: none;">
						<view class="col3 fs30">学校名称</view>
						<input type="text" placeholder="请填写" v-model="model.school_name" class="flex-grow-1 tr pl20 col3"
							placeholder-class="col9" />
					</view>
					<picker mode="multiSelector" :range="multiStartArray" @change="onPickerStartChange" :value="multiStartIndex">
						<view class="flex-box item">
							<view class="col3 fs30 flex-grow-1 pr20">入学年份</view>
							<view class="fs30" :class="[!model.start?'col9':'col3']">{{!model.start?'请选择':model.start}}</view>
							<image src="@/static/public/arrow-r.png" mode="widthFix" class="ico10 mt5 ml10"></image>
						</view>
					</picker>
					<picker mode="multiSelector" :range="multiArray" @change="onPickerChange" @columnchange="onColumnChange" :value="multiIndex">
						<view class="flex-box item">
							<view class="col3 fs30 flex-grow-1 pr20">毕业年份</view>
							<view class="fs30" :class="[!model.end?'col9':'col3']">{{!model.end?'请选择':model.end}}</view>
							<image src="@/static/public/arrow-r.png" mode="widthFix" class="ico10 mt5 ml10"></image>
						</view>
					</picker>
					<multi-select :items="educationLevels" @change="bindEducationChange" id_key="id" name_key="name" :value="model.education_level_id">
						<view class="flex-box item">
							<view class="col3 fs30 flex-grow-1 pr20">学历</view>
							<view class="fs30" :class="[!getListItemById(educationLevels,model.education_level_id)?'col9':'col3']">{{getListItemAttrById(educationLevels,model.education_level_id,'name','请选择')}}</view>
							<image src="@/static/public/arrow-r.png" mode="widthFix" class="ico10 mt5 ml10"></image>
						</view>
					</multi-select>
					<view class="flex-box item">
						<view class="col3 fs30">所学专业</view>
						<input type="text" placeholder="请填写" v-model="model.major" class="flex-grow-1 tr pl20 col3"
							placeholder-class="col9" />
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import multiSelect from '@/components/multi-select/multi-select.vue';
	var validate = require("../../xilu/validate.js");
	export default {
		data() {
			return {
				
				multiStartArray: [this.$core.getYears(), this.$core.getMonths()],
				multiStartIndex: [0, 0], // 初始选中的索引
				multiArray: [this.$core.getYears(true), this.$core.getMonths()],
				multiIndex: [1, 0], // 初始选中的索引
				model: {},
				educationLevels: []
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad() {
			
			this.getOpenerEventChannel().on('dataTransfer', data => {
				this.model = Object.assign({},data.model); //创建一份浅拷贝, 不影响上一页的值;
			});
			this.$util.getEducationLevels(false).then(items=>{
				items.splice(0,1);
				this.educationLevels = items;
			});
		},
		methods: {
			onPickerStartChange(e) {
			  const index = e.detail.value; // 获取选中的索引数组
			  this.model.start = `${this.multiStartArray[0][index[0]]}-${this.multiStartArray[1][index[1]]}`; // 设置显示文本为选择的年月
			  this.$forceUpdate();
			},
			onPickerChange(e) {
			  const index = e.detail.value; // 获取选中的索引数组
			  if (index[0] == 0) { // 如果选择的第三列是至今，则不显示年月，可以根据需要自定义显示文本或隐藏年月信息
				this.model.end = '至今'; // 设置显示文本为“至今”
			  } else {
				this.model.end = `${this.multiArray[0][index[0]]}-${this.multiArray[1][index[1]]}`; // 设置显示文本为选择的年月
			  }
			  this.$forceUpdate();
			},
			onColumnChange(e) {
			  const column = e.detail.column;
			  const value = e.detail.value;
			  if (column === 0 && value === 0) {
				this.multiArray = [this.$core.getYears(true),[]]
			  }else if (column <=1) {
				this.multiArray = [this.$core.getYears(true),this.$core.getMonths()]
				this.multiIndex[column] = value; // 更新索引数组中的值以反映更改的列的索引值变化。如果需要更新年月显示，可以在这里添加逻辑
			  }
			},
			bindEducationChange(e){
				let index = e.indexValues;
				this.model.education_level_id = this.educationLevels[index[0]].id;
				this.$forceUpdate();
			},
			bindSubmit(event) {
				let data = this.model;
				var rule = [
					{name: 'school_name',rules: ['require'],errorMsg: {require: '请填写学校'}},
					{name: 'education_level_id',rules: ['require','gt:0'],errorMsg: {require: '请选择学历',gt: '请选择学历'}},
					{name: 'start',rules: ['require'],errorMsg: {require: '请选择开始时间'}},
					{name: 'end',rules: ['require'],errorMsg: {require: '请选择结束时间'}},
					{name: 'major',rules: ['require'],errorMsg: {require: '请填写专业'}},
				];
				// 是否全部通过，返回Boolean
				if (!validate.check(data, rule)) {
				    uni.showToast({
				        title: validate.getError()[0],
				        icon: 'none'
				    });
				    return;
				}
			    data.module = 'education';
			    this.$core.post({
			      url: 'xilujob.user/save_module', data: data,
			      success: ret => {
			        this.getOpenerEventChannel().emit('dataTransfer', {
			          model: ret.data.model,
			          complete_percent: ret.data.complete_percent
			        });
			        uni.navigateBack();
			      }
			    });
			},
			//删除
			bindDelModule() {
				let page = this;
				uni.showModal({
					title: '提示',
					content: '确认删除？',
					success: res => {
						if (res.confirm) {
							page.$core.post({
								url: 'xilujob.user/del_module',
								data: {
									module: 'education',
									id: page.model.id
								},
								success: ret => {
									this.getOpenerEventChannel().emit('dataDelTransfer', {
										model: ret.data.model,
										complete_percent: ret.data.complete_percent
									});
									uni.navigateBack()
								}
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box1 {
		
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		padding: 10rpx 30rpx;

		.item {
			border-top: 1px solid #F4F4F4;
			height: 104rpx;
		}
	}

	.ico10 {
		width: 10rpx;
	}
	.del{
		width: 220rpx;
		height: 82rpx;
		line-height: 82rpx;
		text-align: center;
		font-size: 30rpx;
		color: #999999;
		background: rgba(227, 229, 236, 0.5);
		border-radius: 8rpx;
		
	}
	.btn1.mini{
		height: 82rpx;
		line-height: 82rpx;
		width: 440rpx;
		border-radius: 8rpx;
	}
</style>